<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路产品管理测试页面 - CRM旅游管理系统</title>
    
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Apple Design 样式 -->
    <link rel="stylesheet" href="../../shared/styles/apple-design.css">
    
    <!-- 模块样式 -->
    <link rel="stylesheet" href="styles/product-management.css">
    <link rel="stylesheet" href="styles/pricing-modal.css">
    <link rel="stylesheet" href="styles/inventory-modal.css">
    
    <style>
        /* 测试页面特有样式 */
        .test-header {
            background: linear-gradient(135deg, var(--apple-blue), var(--apple-blue-light));
            color: white;
            padding: var(--spacing-6);
            text-align: center;
            margin-bottom: var(--spacing-6);
        }
        
        .test-title {
            font-size: var(--font-size-large-title);
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--spacing-2);
        }
        
        .test-description {
            font-size: var(--font-size-body);
            opacity: 0.9;
        }
        
        .test-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--system-background);
            border-radius: var(--radius-large);
            box-shadow: var(--shadow-large);
            padding: var(--spacing-4);
            border: 1px solid var(--separator-non-opaque);
            z-index: var(--z-modal);
        }
        
        .test-controls h4 {
            margin: 0 0 var(--spacing-3) 0;
            font-size: var(--font-size-headline);
            color: var(--label-primary);
        }
        
        .test-buttons {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
        }
        
        .test-btn {
            padding: var(--spacing-2) var(--spacing-3);
            border: none;
            border-radius: var(--radius-medium);
            background-color: var(--apple-blue);
            color: white;
            font-size: var(--font-size-subhead);
            cursor: pointer;
            transition: all var(--transition-fast);
            white-space: nowrap;
        }
        
        .test-btn:hover {
            background-color: var(--apple-blue-dark);
            transform: translateY(-1px);
        }
        
        .test-btn.secondary {
            background-color: var(--fill-secondary);
            color: var(--label-primary);
        }
        
        .test-btn.secondary:hover {
            background-color: var(--fill-primary);
        }
        
        .test-status {
            margin-top: var(--spacing-4);
            padding: var(--spacing-3);
            background-color: var(--system-background-secondary);
            border-radius: var(--radius-medium);
            font-size: var(--font-size-caption-1);
            color: var(--label-secondary);
        }
        
        .status-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-1);
        }
        
        .status-item:last-child {
            margin-bottom: 0;
        }
        
        .status-indicator {
            color: var(--apple-green);
        }
        
        .status-indicator.error {
            color: var(--apple-red);
        }
        
        .status-indicator.warning {
            color: var(--apple-orange);
        }
        
        /* 隐藏正式页面的某些元素，方便测试 */
        .mobile-test .sidebar {
            transform: translateX(-100%);
        }
        
        .mobile-test .main-content {
            margin-left: 0;
        }
        
        /* 响应式测试指示器 */
        .responsive-indicator {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: var(--apple-green);
            color: white;
            padding: var(--spacing-2);
            border-radius: var(--radius-medium);
            font-size: var(--font-size-caption-1);
            font-weight: var(--font-weight-semibold);
            z-index: var(--z-modal);
        }
        
        @media (max-width: 1200px) {
            .responsive-indicator {
                background-color: var(--apple-orange);
            }
            .responsive-indicator:after {
                content: " - 平板";
            }
        }
        
        @media (max-width: 768px) {
            .responsive-indicator {
                background-color: var(--apple-red);
            }
            .responsive-indicator:after {
                content: " - 手机";
            }
        }
    </style>
</head>
<body>
    <!-- 响应式指示器 -->
    <div class="responsive-indicator">桌面端</div>
    
    <!-- 测试页面头部 -->
    <div class="test-header">
        <h1 class="test-title">线路产品管理页面测试</h1>
        <p class="test-description">基于Apple Design Guidelines的现代化产品管理界面</p>
    </div>

    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-route"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">产品管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">线路产品管理</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" title="通知">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <button class="nav-button" title="设置">
                    <i class="fas fa-cog"></i>
                </button>
                <div class="user-menu">
                    <img src="../../shared/assets/user-avatar.png" alt="用户头像" class="user-avatar" 
                         onerror="this.src=''">
                    <span class="user-name">测试管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h6 class="sidebar-title">产品管理</h6>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="#" class="menu-link">
                            <i class="fas fa-route"></i>
                            <span>线路产品管理</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>产品分类管理</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-image"></i>
                            <span>产品资料管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h6 class="sidebar-title">销售支持</h6>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-thumbs-up"></i>
                            <span>产品推荐</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售分析</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="content-container">
            <!-- 页面头部 -->
            <header class="page-header">
                <div class="header-left">
                    <h1 class="page-title">线路产品管理</h1>
                    <p class="page-subtitle">管理旅游线路产品信息、价格和库存</p>
                </div>
                <div class="header-right">
                    <button class="btn btn-outline btn-small" onclick="exportProducts()">
                        <i class="fas fa-download"></i>
                        导出产品
                    </button>
                    <button class="btn btn-primary" onclick="openCreateProductModal()">
                        <i class="fas fa-plus"></i>
                        新增产品
                    </button>
                </div>
            </header>

            <!-- 统计概览 -->
            <section class="stats-overview">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-route"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">156</div>
                            <div class="stat-label">总产品数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">128</div>
                            <div class="stat-label">正常销售</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">15</div>
                            <div class="stat-label">库存预警</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon danger">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">8</div>
                            <div class="stat-label">已售罄</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 筛选和搜索工具栏 -->
            <section class="toolbar">
                <div class="search-container">
                    <div class="search-input-wrapper">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="form-input search-input" placeholder="搜索产品名称、编号或目的地...">
                    </div>
                </div>
                
                <div class="filters-container">
                    <select class="form-select filter-select" id="categoryFilter">
                        <option value="">全部分类</option>
                        <option value="domestic">国内游</option>
                        <option value="outbound">出境游</option>
                        <option value="surrounding">周边游</option>
                        <option value="custom">定制游</option>
                    </select>
                    
                    <select class="form-select filter-select" id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="active">正常销售</option>
                        <option value="paused">暂停销售</option>
                        <option value="coming">即将上线</option>
                        <option value="discontinued">已下架</option>
                        <option value="seasonal">季节性暂停</option>
                    </select>
                    
                    <select class="form-select filter-select" id="sortFilter">
                        <option value="created_desc">创建时间↓</option>
                        <option value="created_asc">创建时间↑</option>
                        <option value="sales_desc">销量↓</option>
                        <option value="sales_asc">销量↑</option>
                        <option value="price_desc">价格↓</option>
                        <option value="price_asc">价格↑</option>
                    </select>
                    
                    <button class="btn btn-outline btn-small" onclick="resetFilters()">
                        <i class="fas fa-undo"></i>
                        重置筛选
                    </button>
                </div>
            </section>

            <!-- 产品列表 -->
            <section class="product-list-section">
                <div class="product-table-container">
                    <table class="product-table">
                        <thead>
                            <tr>
                                <th class="col-checkbox">
                                    <input type="checkbox" class="form-checkbox" id="selectAll">
                                </th>
                                <th class="col-image">图片</th>
                                <th class="col-info">产品信息</th>
                                <th class="col-category">分类</th>
                                <th class="col-price">价格</th>
                                <th class="col-inventory">库存</th>
                                <th class="col-status">状态</th>
                                <th class="col-sales">销量</th>
                                <th class="col-actions">操作</th>
                            </tr>
                        </thead>
                        <tbody id="productTableBody">
                            <!-- 产品数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 批量操作栏 -->
                <div class="batch-actions" id="batchActions" style="display: none;">
                    <div class="batch-info">
                        <span>已选择 <span id="selectedCount">0</span> 个产品</span>
                    </div>
                    <div class="batch-buttons">
                        <button class="btn btn-outline btn-small">批量修改状态</button>
                        <button class="btn btn-outline btn-small">批量调价</button>
                        <button class="btn btn-outline btn-small">批量导出</button>
                        <button class="btn btn-destructive btn-small">批量删除</button>
                    </div>
                </div>
                
                <!-- 分页控件 -->
                <div class="pagination-container">
                    <div class="pagination-info">
                        <span>显示 1-20 条，共 156 条记录</span>
                    </div>
                    <div class="pagination">
                        <button class="btn btn-outline btn-small" disabled>
                            <i class="fas fa-chevron-left"></i>
                            上一页
                        </button>
                        <div class="page-numbers">
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <span class="page-ellipsis">...</span>
                            <button class="page-btn">8</button>
                        </div>
                        <button class="btn btn-outline btn-small">
                            下一页
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- 模态框容器 -->
    <div id="pricing-modal-container"></div>
    <div id="inventory-modal-container"></div>
    <div id="product-form-modal-container"></div>

    <!-- 测试控制面板 -->
    <div class="test-controls">
        <h4>测试控制</h4>
        <div class="test-buttons">
            <button class="test-btn" onclick="testPricingModal()">
                <i class="fas fa-dollar-sign"></i> 价格管理
            </button>
            <button class="test-btn" onclick="testInventoryModal()">
                <i class="fas fa-boxes"></i> 库存管理
            </button>
            <button class="test-btn secondary" onclick="toggleMobileView()">
                <i class="fas fa-mobile-alt"></i> 切换移动端
            </button>
            <button class="test-btn secondary" onclick="testNotifications()">
                <i class="fas fa-bell"></i> 测试通知
            </button>
            <button class="test-btn secondary" onclick="testBatchSelect()">
                <i class="fas fa-check-square"></i> 批量选择
            </button>
            <button class="test-btn secondary" onclick="reloadData()">
                <i class="fas fa-sync"></i> 重载数据
            </button>
        </div>
        
        <div class="test-status">
            <div class="status-item">
                <span>模态框加载:</span>
                <span class="status-indicator" id="modalStatus">
                    <i class="fas fa-spinner fa-spin"></i>
                </span>
            </div>
            <div class="status-item">
                <span>数据加载:</span>
                <span class="status-indicator" id="dataStatus">
                    <i class="fas fa-spinner fa-spin"></i>
                </span>
            </div>
            <div class="status-item">
                <span>交互功能:</span>
                <span class="status-indicator" id="interactionStatus">
                    <i class="fas fa-spinner fa-spin"></i>
                </span>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../../shared/scripts/modal-loader.js"></script>
    <script src="scripts/product-management.js"></script>
    
    <script>
        // 测试相关功能
        let isMobileView = false;
        
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            console.log('测试页面加载完成');
            
            // 检查模态框加载状态
            setTimeout(checkModalStatus, 1000);
            
            // 检查数据加载状态
            setTimeout(checkDataStatus, 2000);
            
            // 检查交互功能状态
            setTimeout(checkInteractionStatus, 3000);
        });
        
        // 测试价格管理模态框
        function testPricingModal() {
            console.log('测试价格管理模态框');
            openPricingModal('TEST001');
        }
        
        // 测试库存管理模态框
        function testInventoryModal() {
            console.log('测试库存管理模态框');
            openInventoryModal('TEST001');
        }
        
        // 切换移动端视图
        function toggleMobileView() {
            isMobileView = !isMobileView;
            document.body.classList.toggle('mobile-test', isMobileView);
            
            const btn = event.target.closest('.test-btn');
            btn.innerHTML = isMobileView 
                ? '<i class="fas fa-desktop"></i> 切换桌面端'
                : '<i class="fas fa-mobile-alt"></i> 切换移动端';
        }
        
        // 测试通知系统
        function testNotifications() {
            const types = ['success', 'error', 'warning', 'info'];
            const messages = [
                '操作成功完成！',
                '发生了一个错误',
                '请注意检查设置',
                '这是一条提示信息'
            ];
            
            types.forEach((type, index) => {
                setTimeout(() => {
                    showNotification(messages[index], type);
                }, index * 500);
            });
        }
        
        // 测试批量选择
        function testBatchSelect() {
            const checkboxes = document.querySelectorAll('.product-checkbox');
            const randomCount = Math.floor(Math.random() * checkboxes.length) + 1;
            
            // 随机选择一些产品
            for (let i = 0; i < randomCount; i++) {
                const randomIndex = Math.floor(Math.random() * checkboxes.length);
                const checkbox = checkboxes[randomIndex];
                if (checkbox && !checkbox.checked) {
                    checkbox.checked = true;
                    checkbox.dispatchEvent(new Event('change'));
                }
            }
        }
        
        // 重新加载数据
        function reloadData() {
            console.log('重新加载测试数据');
            showTableLoading();
            setTimeout(() => {
                loadProductData();
                showNotification('数据已重新加载', 'success');
            }, 1000);
        }
        
        // 检查模态框状态
        function checkModalStatus() {
            const pricingContainer = document.getElementById('pricing-modal-container');
            const inventoryContainer = document.getElementById('inventory-modal-container');
            const statusEl = document.getElementById('modalStatus');
            
            if (pricingContainer && inventoryContainer) {
                const pricingLoaded = pricingContainer.innerHTML.trim() !== '';
                const inventoryLoaded = inventoryContainer.innerHTML.trim() !== '';
                
                if (pricingLoaded && inventoryLoaded) {
                    statusEl.innerHTML = '<i class="fas fa-check"></i>';
                    statusEl.className = 'status-indicator';
                } else {
                    statusEl.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
                    statusEl.className = 'status-indicator warning';
                }
            } else {
                statusEl.innerHTML = '<i class="fas fa-times"></i>';
                statusEl.className = 'status-indicator error';
            }
        }
        
        // 检查数据状态
        function checkDataStatus() {
            const tableBody = document.getElementById('productTableBody');
            const statusEl = document.getElementById('dataStatus');
            
            if (tableBody && tableBody.children.length > 0) {
                statusEl.innerHTML = '<i class="fas fa-check"></i>';
                statusEl.className = 'status-indicator';
            } else {
                statusEl.innerHTML = '<i class="fas fa-times"></i>';
                statusEl.className = 'status-indicator error';
            }
        }
        
        // 检查交互功能状态
        function checkInteractionStatus() {
            const statusEl = document.getElementById('interactionStatus');
            
            // 检查是否有JavaScript错误
            let hasErrors = false;
            const originalError = window.onerror;
            
            window.onerror = function() {
                hasErrors = true;
                return originalError ? originalError.apply(this, arguments) : false;
            };
            
            try {
                // 测试核心功能
                if (typeof ProductModule !== 'undefined' && 
                    typeof openPricingModal === 'function' && 
                    typeof openInventoryModal === 'function') {
                    statusEl.innerHTML = '<i class="fas fa-check"></i>';
                    statusEl.className = 'status-indicator';
                } else {
                    statusEl.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
                    statusEl.className = 'status-indicator warning';
                }
            } catch (error) {
                console.error('交互功能检查失败:', error);
                statusEl.innerHTML = '<i class="fas fa-times"></i>';
                statusEl.className = 'status-indicator error';
            }
        }
        
        // 监听窗口大小变化，更新响应式指示器
        window.addEventListener('resize', function() {
            console.log('窗口大小变化:', window.innerWidth + 'x' + window.innerHeight);
        });
        
        // 重写showNotification函数以支持测试
        const originalShowNotification = window.showNotification;
        window.showNotification = function(message, type, duration) {
            console.log(`通知: [${type}] ${message}`);
            if (originalShowNotification) {
                return originalShowNotification(message, type, duration);
            }
        };
    </script>
</body>
</html>